MDL Tag Helpers for asp.net 5

Badge

badge component is an onscreen notification element

Badges on icon

Default

With colors

Many sizess


<!-- Badge number on icon -->
<mdl-icon icon="MaterialDesignLite.TagHelpers.StyleValues.MDLIcon" mdl-badge="1"></mdl-icon>
     
<!-- Badge special char on icon -->
<mdl-icon icon="MaterialDesignLite.TagHelpers.StyleValues.MDLIcon" mdl-badge="♥"></mdl-icon>
       
<!-- Badge color on big icon -->
<mdl-icon icon="MaterialDesignLite.TagHelpers.StyleValues.MDLIcon" 
        icon-size="64" 
        mdl-badge="1" 
        mdl-badge-color="green">
</mdl-icon>

Badges on label

Inbox


<!--  Badge on label -->
<span mdl-badge="4">Inbox</span>
<!--  Badge on link -->
<a href="#" mdl-badge="4">Inbox</a>
<!--  Badge on button -->
<span mdl-badge="4">
    <mdl-button>Inbox</mdl-button>
</span>